<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html" template="/layout/normal.xhtml"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:s="http://jboss.com/products/seam/taglib">

	<ui:define name="body">
		<a name="errores" />
		<h:panelGrid columns="1" id="mensaje" style="text-align:left;">
			<h:messages id="mesage1" styleClass="mensaje_bienvenida">
				<a4j:support event="onchange" action="location.hash='#errores'"></a4j:support>
			</h:messages>
		</h:panelGrid>
		<h:panelGrid columns="1" styleClass="contenedor_pest">
			<rich:tabPanel styleClass="pestanya">
				<rich:tab label="Cuenta de usuario" styleClass="no_border">
					<rich:spacer height="15px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText rendered="#{userAdmin.modo == 1}"
							value="Aquí se muestran los datos de la cuenta de usuario. Edite los datos de la cuenta que desee y pulse
							 el botón guardar para registrar los cambios"
							styleClass="thDescripcion_peq700" />
						<h:outputText rendered="#{userAdmin.modo == 2}"
							value="Aquí se muestran los datos de la cuenta de usuario. Al estar en modo consulta solo podrá consultar los datos, 
							no podrá modificar nada."
							styleClass="thDescripcion_peq700" />
					</h:panelGrid>
					<rich:spacer height="15px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText value="DATOS DE LA CUENTA" styleClass="th200_titulo" />
					</h:panelGrid>
					<rich:spacer height="3px;"></rich:spacer>
					<rich:separator styleClass="separadorTres"></rich:separator>
					<rich:spacer height="10px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:panelGrid columns="2">
							<h:outputText value="Nombre de usuario" styleClass="th120" />
							<h:inputText value="#{userAdmin.user.username}"
								disabled="#{userAdmin.modo == 2}" styleClass="input150" />
						</h:panelGrid>
						<rich:spacer height="10px;" rendered="#{userAdmin.modo == 1}"></rich:spacer>
						<h:panelGrid columns="1" rendered="#{userAdmin.modo == 1}">
							<h:outputText
								value="Introduce una contraseña para la cuenta. Recuerde, se tiene en cuenta las mayúsculas y minúsculas. Además, debe
								tener un mínimo de 4 caractéres y un máximo de 12."
								styleClass="thDescripcion_peq700" />
						</h:panelGrid>
						<rich:spacer height="5px;" rendered="#{userAdmin.modo == 1}"></rich:spacer>
						<h:panelGrid columns="5" rendered="#{userAdmin.modo == 1}">
							<h:outputText value="Contraseña" styleClass="th80" />
							<h:inputSecret value="#{userAdmin.password}"
								disabled="#{userAdmin.modo == 2}" styleClass="input100"
								maxlength="12" />
							<rich:spacer width="15px;"></rich:spacer>
							<h:outputText value="Confirmar contraseña"
								disabled="#{userAdmin.modo == 2}" styleClass="th120" />
							<h:inputSecret value="#{userAdmin.confPassword}"
								disabled="#{userAdmin.modo == 2}" styleClass="input100"
								maxlength="12" />
						</h:panelGrid>
						<rich:spacer height="10px;" rendered="#{userAdmin.modo == 1}"></rich:spacer>
						<h:panelGrid columns="1" rendered="#{userAdmin.modo == 1}">
							<h:outputText value="Escribe una dirección de correo válida."
								styleClass="thDescripcion_peq600" />
						</h:panelGrid>
						<rich:spacer height="5px;" rendered="#{userAdmin.modo == 1}"></rich:spacer>
						<h:panelGrid columns="5" rendered="#{userAdmin.modo == 1}">
							<h:outputText value="Email" styleClass="th80" />
							<h:inputText value="#{userAdmin.email}" styleClass="input200" />
							<rich:spacer width="15px;"></rich:spacer>
							<h:outputText value="Confirmar email" styleClass="th100" />
							<h:inputText value="#{userAdmin.confEmail}" tyleClass="input200" />
						</h:panelGrid>
						<h:panelGrid columns="2" rendered="#{userAdmin.modo == 2}">
							<h:outputText value="Email" styleClass="th80" />
							<h:inputText value="#{userAdmin.user.email}"
								styleClass="input200" disabled="#{userAdmin.modo == 2}" />
						</h:panelGrid>
						<rich:spacer height="10px;" rendered="#{userAdmin.modo == 1}"></rich:spacer>
						<h:panelGrid columns="1" rendered="#{userAdmin.modo == 1}">
							<h:outputText
								value="Seleccione un perfil de usuario para asociarselo en su cuenta de usuario."
								styleClass="thDescripcion_peq600" />
						</h:panelGrid>
						<rich:spacer height="5px;" rendered="#{userAdmin.modo == 1}"></rich:spacer>
						<h:panelGrid columns="2">
							<h:outputText value="Perfil" styleClass="th80" />
							<h:selectOneMenu value="#{userAdmin.user.perfil}"
								disabled="#{userAdmin.modo == 2}" styleClass="input150"
								id="perfil">
								<s:selectItems var="tipo" value="#{userAdmin.listaPerfiles}"
									label="#{tipo.perfil}" noSelectionLabel=""></s:selectItems>
								<s:convertEntity />
							</h:selectOneMenu>
						</h:panelGrid>
					</h:panelGrid>
					<rich:spacer height="15px;"></rich:spacer>
					<h:panelGrid columns="1">
						<h:outputText value="DATOS DEL USUARIO" styleClass="th200_titulo" />
					</h:panelGrid>
					<rich:spacer height="3px;"></rich:spacer>
					<rich:separator styleClass="separadorTres"></rich:separator>
					<rich:spacer height="10px;"></rich:spacer>
					<h:panelGrid columns="5">
						<h:outputText value="Nombre" styleClass="th80" />
						<h:inputText value="#{userAdmin.user.nombre}"
							disabled="#{userAdmin.modo == 2}" styleClass="input150" />
						<rich:spacer width="15px;"></rich:spacer>
						<h:outputText value="Apellidos" styleClass="th80" />
						<h:inputText value="#{userAdmin.user.apellidos}"
							disabled="#{userAdmin.modo == 2}" styleClass="input250" />
					</h:panelGrid>
					<h:panelGrid columns="5">
						<h:outputText value="Provincia" styleClass="th80_registro" />
						<h:selectOneMenu value="#{userAdmin.user.provincia}"
							disabled="#{userAdmin.modo == 2}" styleClass="input100" id="prov">
							<s:selectItems var="tipo" value="#{userAdmin.listaProvincias}"
								label="#{tipo.provincia}" noSelectionLabel=""></s:selectItems>
							<s:convertEntity />
							<a4j:support event="onchange" reRender="mun"></a4j:support>
						</h:selectOneMenu>
						<rich:spacer width="25px;"></rich:spacer>
						<h:outputText value="Municipio" styleClass="th80_registro" />
						<h:selectOneMenu value="#{userAdmin.user.municipio}"
							disabled="#{userAdmin.modo == 2}" styleClass="input150" id="mun">
							<s:selectItems var="tipo" value="#{userAdmin.listaMunicipios}"
								label="#{tipo.municipio}" noSelectionLabel=""></s:selectItems>
							<s:convertEntity />
						</h:selectOneMenu>
					</h:panelGrid>
					<h:panelGrid columns="2">
						<h:outputText value="Dirección" styleClass="th80_registro" />
						<h:inputText value="#{userAdmin.user.direccion}"
							disabled="#{userAdmin.modo == 2}" styleClass="input200" />
					</h:panelGrid>
				</rich:tab>
			</rich:tabPanel>
			<rich:spacer height="10px;"></rich:spacer>

		</h:panelGrid>

	</ui:define>
	<ui:define name="botonera">
		<h:panelGrid columns="9" styleClass="tabla_botonera">
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera ayuda" id="linkAyuda"
					style="width:48px;"
					title="pulsa para obtener ayuda acerca de la pantalla">
					<rich:componentControl for="panelAyuda" attachTo="linkAyuda"
						operation="show" event="onclick"></rich:componentControl>
				</a4j:commandButton>
				<h:outputText value="Ayuda" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera guardar"
					id="linkGuardar" style="width:48px;"
					title="pulsa para guardar los datos del nuevo usuario">
					<rich:componentControl for="panelGuardar" attachTo="linkGuardar"
						operation="show" event="onclick"></rich:componentControl>
				</a4j:commandButton>
				<h:outputText value="Guardar" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera limpiar"
					style="width:48px;" action="#{jugadorAction.ayudaInicial()}">
					<rich:toolTip value="pulsa para limpiar el formulario"
						styleClass="rich-tool-tip"></rich:toolTip>
				</a4j:commandButton>
				<h:outputText value="Limpiar" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera volver"
					style="width:48px;" action="#{userAdmin.volver()}"
					title="pulsa para volver a los resultados de la consulta">
				</a4j:commandButton>
				<h:outputText value="Volver" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
			<rich:spacer width="15px;"></rich:spacer>
			<h:panelGrid columns="1">
				<a4j:commandButton styleClass="botonBotonera inicio"
					style="width:48px;" action="#{userAdmin.menu()}"
					title="pulsa para volver al menú principal de la aplicación">
				</a4j:commandButton>
				<h:outputText value="Inicio" style="width:48px;"
					styleClass="botonTexto_botonera"></h:outputText>
			</h:panelGrid>
		</h:panelGrid>

		<rich:modalPanel id="panelAyuda" minWidth="400" minHeight="200"
			autosized="false" resizeable="false">

			<rich:spacer height="5px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="160px;"></rich:spacer>
				<h:outputText value="Ayuda" styleClass="thTitulo" />
			</h:panelGrid>
			<rich:spacer height="10px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="25px;"></rich:spacer>
				<h:outputText
					value="Está en la pantalla de alta de nuevo usuario. Para dar de alta un nuevo usuario necesitará como mínimo asignarle 
									un nombre de usuario, una contraseña (que tenga entre 4 y 12 caracteres) y un email, además de asignarle un perfil. 
									Siga las instrucciones de la pantalla y para almacenar los datos pulse el botón guardar de la botonera inferior."
					style="width:325px;" styleClass="thModalPanel" />
			</h:panelGrid>
			<rich:spacer height="25px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="325px;"></rich:spacer>
				<h:panelGrid columns="1">
					<h:commandButton id="Aceptar" styleClass="boton_crr cerrar">
						<rich:componentControl for="panelAyuda" attachTo="Aceptar"
							operation="hide" event="onclick" />
					</h:commandButton>
				</h:panelGrid>
			</h:panelGrid>
		</rich:modalPanel>

		<rich:modalPanel id="panelGuardar" minWidth="400" minHeight="200"
			autosized="false" resizeable="false">

			<rich:spacer height="5px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="160px;"></rich:spacer>
				<h:outputText value="Guardar" styleClass="thTitulo" />
			</h:panelGrid>
			<rich:spacer height="10px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="25px;"></rich:spacer>
				<h:outputText
					value="Se dispone a guardar los datos en el sistema. 
					¿Desea guardar los datos modificados del formulario?"
					style="width:325px;" styleClass="thModalPanel" />
			</h:panelGrid>
			<rich:spacer height="25px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="90px;"></rich:spacer>
				<h:panelGrid columns="3">
					<h:commandButton id="aceptarG" action="#{userAdmin.guardar()}"
						value="" styleClass="boton_modal aceptar">
						<rich:componentControl for="panelGuardar" attachTo="aceptarG"
							operation="hide" event="onclick" />
					</h:commandButton>
					<rich:spacer width="15px;"></rich:spacer>
					<h:commandButton id="cancelarG" value=""
						styleClass="boton_modal cancelar">
						<rich:componentControl for="panelGuardar" attachTo="cancelarG"
							operation="hide" event="onclick" />
					</h:commandButton>
				</h:panelGrid>
			</h:panelGrid>
			<rich:spacer height="25px;"></rich:spacer>
			<h:panelGrid columns="2">
				<rich:spacer width="325px;"></rich:spacer>
				<h:panelGrid columns="1">
					<h:commandButton id="cerrarG" styleClass="boton_crr cerrar">
						<rich:componentControl for="panelGuardar" attachTo="cerrarG"
							operation="hide" event="onclick" />
					</h:commandButton>
				</h:panelGrid>
			</h:panelGrid>
		</rich:modalPanel>

	</ui:define>
</ui:composition>